<template>
    <!-- 商品分类导航 -->
    <div class="type-nav">
        <div class="container">
            <div @mouseleave="moveOutDiv" @mouseenter="isShow = true">
                <h2 class="all">全部商品分类</h2>
                <transition name="sort">
                    <div class="sort" v-show="isShow">
                        <div class="all-sort-list2" @click="toSeach">
                            <div 
                            class="item" 
                            :class="{item_on:currentIndex === index}" 
                            v-for="(category1,index) in categoryList" 
                            :key="category1.categoryId"
                            @mouseenter="moveInItem(index)"
                            >
                                <h3>
                                    <!-- <a href="">{{category1.categoryName}}</a> -->
                                    <a href="javascript:;" :data-category1Id='category1.categoryId' :data-categoryName='category1.categoryName'>{{category1.categoryName}}</a>
                                    <!-- <router-link 
                                    :to="{name:'search',
                                    query:{category1Id:category1.categoryId,categoryName:category1.categoryName}}"
                                    >
                                    {{category1.categoryName}}
                                    </router-link> -->
                                </h3>
                                <div class="item-list clearfix">
                                    <div class="subitem"> 
                                        <dl class="fore" v-for="category2 in category1.categoryChild" :key="category2.categoryId">
                                            <dt>
                                                <a href="javascript:;" :data-category2Id='category2.categoryId' :data-categoryName='category2.categoryName'>{{category2.categoryName}}</a>
                                                <!-- <router-link 
                                                :to="{name:'search',
                                                query:{category2Id:category2.categoryId,categoryName:category2.categoryName}}"
                                                >
                                                {{category2.categoryName}}
                                                </router-link> -->
                                                <!-- <router-link to="/search">{{category2.categoryName}}</router-link> -->
                                            </dt>
                                            <dd>
                                                <em v-for="category3 in category2.categoryChild" :key="category3.categoryId">
                                                    <!-- <a href="">{{category3.categoryName}}</a> -->
                                                    <!-- <router-link to="/search">{{category3.categoryName}}</router-link> -->
                                                    <!-- <router-link 
                                                    :to="{name:'search',
                                                    query:{category3Id:category3.categoryId,categoryName:category3.categoryName}}"
                                                    >
                                                    {{category3.categoryName}}
                                                    </router-link> -->
                                                    <a href="javascript:;" :data-category3Id='category3.categoryId' :data-categoryName='category3.categoryName'>{{category3.categoryName}}</a>
                                                </em>
                                            </dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </transition>
                
            </div>
           
            <nav class="nav">
                <a href="###">服装城</a>
                <a href="###">美妆馆</a>
                <a href="###">尚品汇超市</a>
                <a href="###">全球购</a>
                <a href="###">闪购</a>
                <a href="###">团购</a>
                <a href="###">有趣</a>
                <a href="###">秒杀</a>
            </nav>

           
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import throttle from 'lodash/throttle';
export default {
    name:"",
    //组件在挂载完成的时候，就立马发送请求获取数据，存储到vuex里面，而不是直接在vue组件里面
    data(){
        return {
            currentIndex: -1,
            isShow: true,
        };
    },
    mounted(){
        // dispatch是分发和触发的意思，和emit单词意思一样
        if(this.$route.path !== '/home') {
            this.isShow = false
        }
    },
    methods:{
        moveInItem:throttle(function (index){
            this.currentIndex = index;
        },20,{"trailing":false}),
        //事件委托的回调函数  
        toSeach(event){
            //event是什么   事件对象  每一次触发事件的时候每一次触发，浏览器内核都会把这一次的触发的相关信息，封装为一个对象
            //在浏览器调用回调函数时，自动传递给回调函数的第一个形参
            // let targetNode =  event.target;
            // console.log(targetNode);
            let data = event.target.dataset;
            let {category1id,category2id,category3id,categoryname}  = data;
            let location = {
                name:'search',
                query:{
                    categoryName:categoryname,
                    category1Id:category1id,
                    category2Id:category2id,
                    category3Id:category3id,
                },
            };
            if(this.$route.params){
                location.params = this.$route.params;
            }
            if(categoryname){
                if(this.$route.path !== "/home"){
                    this.$router.replace(location);
                }else{
                     this.$router.push(location);
                }
               
            }
            
        },
        moveOutDiv(){
            this.currentIndex=-1;
            if(this.$route.path !== '/home') {
                this.isShow = false
            }
        },
    },
    //从vuex当中把数据捞到vue组件中使用
    //以后只要从vuex中拿的是数据（state和getters当中的东西），都在computed当中拿，
    //以后只要从vuex拿的是在调用的方法（mutations和actions当中的东西都去methods中去拿）
    computed:{
        //函数内部可以是数组也可以是对象
        //是数组必须要满足的条件：
        //1、数据直接就是总的state当中的数据，不能是模块里面的，
        //2、数组中的名字必须和state当中的名字一致 
        // ...mapState(["categorylist"]),

        ...mapState({
            categoryList:state => state.home.categoryList
        })
    },
}
</script>

<style lang="less" scoped>
    .type-nav {
        border-bottom: 2px solid #e1251b;

        .container {
            width: 1200px;
            margin: 0 auto;
            display: flex;
            position: relative;

            .all {
                width: 210px;
                height: 45px;
                background-color: #e1251b;
                line-height: 45px;
                text-align: center;
                color: #fff;
                font-size: 14px;
                font-weight: bold;
            }

            .nav {
                a {
                    height: 45px;
                    margin: 0 22px;
                    line-height: 45px;
                    font-size: 16px;
                    color: #333;
                }
            }

            .sort {
                position: absolute;
                left: 0;
                top: 45px;
                width: 210px;
                height: 461px;
                position: absolute;
                background: #fafafa;
                z-index: 999;
                
                &.sort-enter{
                    height:0;
                    opacity: 0;
                }
                &.sort-enter-to{
                    height:461px;
                    opacity: 1;
                }
                &.sort-enter-active{
                    transition: all 2s;
                }

                .all-sort-list2 {
                    .item {
                        h3 {
                            line-height: 30px;
                            font-size: 14px;
                            font-weight: 400;
                            overflow: hidden;
                            padding: 0 20px;
                            margin: 0;

                            a {
                                color: #333;
                            }
                        }

                        .item-list {
                            display: none;
                            position: absolute;
                            width: 734px;
                            min-height: 460px;
                            background: #f7f7f7;
                            left: 210px;
                            border: 1px solid #ddd;
                            top: 0;
                            z-index: 9999 !important;

                            .subitem {
                                float: left;
                                width: 650px;
                                padding: 0 4px 0 8px;

                                dl {
                                    border-top: 1px solid #eee;
                                    padding: 6px 0;
                                    overflow: hidden;
                                    zoom: 1;

                                    &.fore {
                                        border-top: 0;
                                    }

                                    dt {
                                        float: left;
                                        width: 54px;
                                        line-height: 22px;
                                        text-align: right;
                                        padding: 3px 6px 0 0;
                                        font-weight: 700;
                                    }

                                    dd {
                                        float: left;
                                        width: 415px;
                                        padding: 3px 0 0;
                                        overflow: hidden;

                                        em {
                                            float: left;
                                            height: 14px;
                                            line-height: 14px;
                                            padding: 0 8px;
                                            margin-top: 5px;
                                            border-left: 1px solid #ccc;
                                        }
                                    }
                                }
                            }
                        }

                        &.item_on{
                            background-color: hotpink;
                            .item-list {
                                display: block;
                            }
                        }
                    }
                }
            }
        }
    }
</style>